<template>
  <view class="product">
    <view class="main" v-for="item in arr" :key="item" :style="{width: itemWidth}" @tap="goDetails">
      <image src="../static/icon/product.png" mode="widthFix" :style="{width: itemWidth}"></image>
      <view class="content">
        <view class="title">
          <view class="tit">  <view class="tag"> 企业 </view> {{item}} </view>
        </view>
        <view class="tips"> 海之蓝大眼睛看不见你哈哈哈哈 </view>
        <view class="info">
          <view class=""> 3km | 配送 约￥10 </view>
          <view class="mark"> 4.6分</view>
        </view>
        <view class="corporation"> 新加坡印度尼西亚不出名公司 </view>
        <view class="prices">
          <view class="price"> 
            <text class="fh">￥</text>
            <text>1000.00</text>
          </view>
          <view class="xl"> 销量500+ </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
  const arr = ['如需要间距可设置', 'LAMD雀巢咖啡|啥也没有的套装的','如果需要间距可以设置', 'LAMD雀巢咖啡|啥也没有的套装的','如果需要间距可以设置', 'LAMD雀巢咖啡|啥也没有的套装的']
  const { safeArea } = uni.getSystemInfoSync()
  console.log((safeArea.width-33)/2);
  const itemWidth = computed(() => {
    return (safeArea.width - 33) / 2 + 'px'
  })
  const goDetails = () => {
    uni.navigateTo({
      url: '/pages/productDetails/productDetails'
    })
  }
</script>

<style lang="scss" scoped>
  .product {
    width: 100%;
    padding: 7px 0;
    column-count: 2; /* 设置列数 */
    column-gap: 9px; /* 列之间的间距 */
    box-sizing: border-box; /* 确保内边距不会增加容器大小 */
    .main {
      border-radius: 10px;
      background-color: #fff;
      overflow: hidden;
      margin-bottom: 9px;
      .content {
        padding: 8px 7px;
        box-sizing: border-box;
        .title {
          margin-bottom: 5px;
          .tag {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 24px;
            height: 14px;
            font-weight: 400;
            font-size: 10px;
            color: #FFFFFF;
            text-align: center;
            background-color: #FA2C19;
            border-radius: 2px;
            margin-right: 5px;
          }
          .tit {
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            line-height: 17px;
          }
        }
        .tips {
          font-weight: 400;
          font-size: 11px;
          color: #999999;
          line-height: 13px;
        }
        .info {
          display: flex;
          justify-content: space-between;
          margin: 6px 0;
          font-weight: 400;
          font-size: 11px;
          color: #999999;
          line-height: 13px;
          .mark {
            color: #FF3B1E;
          }
        }
        .corporation {
          font-weight: 400;
          font-size: 11px;
          color: #D68C1C;
          line-height: 13px;
          margin-bottom: 6px;
        }
        .prices {
          display: flex;
          justify-content: space-between;
          align-items: end;
          .price {
            font-weight: 500;
            font-size: 16px;
            color: #FF3B1E;
            .fh {
              font-size: 12px
            }
          }
          .xl {
            font-weight: 400;
            font-size: 11px;
            color: #999999;
          }
        }
      }
    }
  }
</style>